<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .cot{
        width: 500px;
        height: 270px;
        background: #d6efe7;
    }
    form{
        float: left;
        text-align: center;
        width: 320px;
        background: #d8dabd;
    }
    p{
        background: #d8dabd;
        margin-top: 20px;
    }
    #username{
        outline: 0;
        width: 315px;
        height: 25px;
    }
    #password{
        outline: 0;
        width: 315px;
        height: 25px;
    }
    #code_img{
        cursor: pointer;
        vertical-align: bottom;
    }
    #img-div{
        float: left;
        cursor: pointer;
        vertical-align: bottom;
        margin-left: 20px;
    }
    #code_input{
        margin-left: 10px;
        height: 38px;
        outline: 0;
    }
    #submit{
        cursor: pointer;
        width: 200px;
        height: 30px;
        color: #496981;
        background: #859eea;
        border: 0;
    }
    .input-placeholder-color::placeholder{
        color: red;
    }
    #flg{
        float: left;
        margin-left: 30px;
        margin-top: 28px;
    }
    #flg span{
        font-size: 12px;
        opacity: 0.5;
    }
    #flg input{
        margin-left: 15px;
        color: #fff;
        background: #777;
        width: 50px;
        border: 0;
        border-radius: 3px;
    }
    #flg img{
        margin-top: 10px;
        width: 118px;
        height: 190px;
    }
</style>
<body>

    <div class="cot">
        <form th:action="@{/user}" th:method="post">
            <p style="line-height: 5px;padding-top: 18px"><b>用户注册</b></p>
            <p><input id="username" name="username" type="text" placeholder="请输入用户名"></p>
            <p><input id="password" name="password" type="password" placeholder="请输入密码"></p>
            <p>
            <div id="img-div" onclick="changeCode()">
                <img id="code_img" th:src="@{/getVerificationCode}" title="点击更换验证码"
                     class="verifyCode"/>
            </div>
            <input id="code_input" type="text" placeholder="输入验证码" th:name="verifyInput">
            </p>
            <p><input id="submit" type="submit" th:value="提交" onclick="return sub()"></p>
        </form>
        <div id="flg">
            <span>已有账号</span> <a href="#" th:href="@{/login}"><input type="button" value="登录"></a>
            <br>
            <img th:src="@{/static/image/no_cover.jpg}" alt="ebook">
        </div>
    </div>

</body>
<!-- 引入JQuery -->
<script th:src="@{https://code.jquery.com/jquery-3.7.0.js}"
        integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
        crossorigin="anonymous"></script>
<script th:inline="javascript">
    function changeCode() {
        $('#img-div').load('/code')
    }

    function checkCode(){
        let flag;
        let iCode = $('#code_input').val();
        $.ajax({
            async: false,
            url: 'checkVerify',
            type: "POST",
            data: {verifyInput:iCode},
            success: function (result){
                flag = result;
            }
        });
        return flag;
    }

    function checkUser(username){
        let flag;
        $.ajax({
            async: false,
            url: 'existUser',
            type: 'post',
            data: {username: username},
            success: function (res) {
                flag = res;
            }
        });
        return flag;
    }

    function sub(){
        let result = false;
        if (!preSub()) return result;
        if (checkCode()){
            let user_input = $('#username');
            let username =user_input.val();
            console.log(username);
            if (!checkUser(username)){
                user_input.val("");
                user_input.attr("placeholder","该用户已存在");
                user_input.addClass("input-placeholder-color");
            }else {
                result = true;
            }
        }else {
            const code_input = $('#code_input');
            code_input.val("");
            code_input.attr("placeholder","验证码错误");
            code_input.css("border","1px solid red");
        }
        return result;
    }

    function preSub(){
        if ($('#username').val()==""||$('#username').val()==null){
            $('#username').addClass('input-placeholder-color');
            $('#username').attr('placeholder','用户名不能为空');
            return false;
        }
        if ($('#password').val()==""||$('#password').val()==null){
            $('#password').addClass('input-placeholder-color');
            $('#password').attr('placeholder','密码不能为空');
            return false;
        }
        return true;
    }

    $('#code_input').focus(function (){
        $('#code_input').css("border","1px solid #ced4da")
    });
    $('#username').focus(function (){
        $('#username').removeClass("input-placeholder-color");
        $('#username').attr("placeholder","")
    });
    $('#password').focus(function (){
        $('#password').removeClass("input-placeholder-color");
        $('#password').attr("placeholder","")
    });

</script>


</html>